import React from "react";
import { connect } from "react-redux";
import OperationBar from '../../components/operation-bar/OperationBar';
import TodoItem from "../../components/todo-item/TodoItem";
import {ITodoItem} from '../../interfaces';
import './style.scss';

interface IProps {
  todoList: Array<ITodoItem>;
}

interface _IState {
  currentSelected: number
}

class TodoPage extends React.Component<IProps> {
  state: _IState;
  constructor(props: IProps) {
    super(props);
    this.state = {
      currentSelected: -1
    };
  }

  handleSelectChange = (val: number) => {
    console.log('handleSelectChange -> val', val);
    this.setState({
      currentSelected: Number(val)
    })
  }

  filterTodoList = (status: number): ITodoItem[] => {
    const {todoList} = this.props;
    let list: ITodoItem[] = [];
    if(status === -1) {
      return todoList;
    }
    todoList.map((item, index) => {
      if(status == 1 && item.isDone) {
        list.push(item);
      }else if(status == 0 && !item.isDone){
        list.push(item);
      }
    })
    return list;
  }

  componentDidMount() {

  }

  render() {
    let todoList = this.filterTodoList(this.state.currentSelected);
    return (
      <div className="todo-page">
        <OperationBar onSelectChange={this.handleSelectChange}></OperationBar>
        {
          todoList.map((item, index) => {
            return (
              <TodoItem key={index} data={item}></TodoItem>
            )
          })
        }

        {
          todoList.length === 0 &&
          <div className="no-data">无数据，快去添加1个Todo吧！</div>
        }
      </div>
    )
  }

}

const mapStateToProps = (state: any) => {
  return {
    todoList: state.todoList
  }
}

export default connect(mapStateToProps)(TodoPage);